<!--pc端标题头-->
<template>
  <div class="header-pc">
    <div class="container-fluid header-main-frame">
      <div class="header-main">
        <nuxt-link to="/" class="logo-frame">
          <img class="logo" src="@/assets/imgs/logo-missyeah.png" />
        </nuxt-link>
        <div class="nav-frame">
          <div class="nav-list-frame">
            <div
              class="nav-panel"
              v-for="(item1, index1) in menuList"
              :key="'item1' + index1"
            >
              <nuxt-link
                :to="
                  '/makeup/' +
                  item1.id +
                  '/' +
                  tool.urlCheckForMenuTitle(item1.title)
                "
                style="
                  font-family: 'BTBlack';
                  color: #000;
                  text-transform: Uppercase;
                "
                class="co-light ho"
                >{{ item1.title }}</nuxt-link
              >
              <div class="tips-frame">
                <van-icon name="play" />
              </div>
              <div class="modal-frame" v-if="item1.children">
                <div class="container-fluid">
                  <div
                    class="modal-panel"
                    v-for="(item2, index2) in item1.children"
                    :key="'item1' + index2"
                  >
                    <div class="modal-title" style="text-transform: Uppercase">
                      <van-icon name="play" />
                      <nuxt-link
                        :to="
                          '/makeup/' +
                          item2.id +
                          '/' +
                          tool.urlCheckForMenuTitle(item2.title)
                        "
                        class="title"
                        >{{ item2.title }}</nuxt-link
                      >
                    </div>
                    <div
                      class="modal-fast"
                      v-for="(item3, index3) in item2.children"
                      :key="'item3' + index3"
                    >
                      <nuxt-link
                        :to="
                          '/makeup/' +
                          item3.id +
                          '/' +
                          tool.urlCheckForMenuTitle(item3.title) +
                          '?parent=' +
                          item3.parent_id
                        "
                        class="title"
                        >{{ item3.title }}</nuxt-link
                      >
                    </div>
                  </div>
                  <div class="modal-panel">
                    <div class="modal-title" style="text-transform: Uppercase">
                      <van-icon name="play" />
                      <span class="title">WANNA LEARN MORE?</span>
                    </div>
                    <div
                      class="modal-fast"
                      v-for="(item4, index4) in blogList"
                      :key="'item4' + index4"
                    >
                      <nuxt-link :to="'/blog/' + item4.id" class="title">{{
                        item4.title
                      }}</nuxt-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-panel">
              <nuxt-link
                to="/blog"
                style="
                  font-family: 'BTBlack';
                  color: #000;
                  text-transform: Uppercase;
                  font-size: 0.7rem;
                "
                class="co-light ho"
                >Blog</nuxt-link
              >
              <div class="tips-frame">
                <van-icon name="play" />
              </div>
              <div class="modal-frame">
                <div class="container-fluid">
                  <div class="modal-panel">
                    <div class="modal-title" style="text-transform: Uppercase">
                      <van-icon name="play" />
                      <nuxt-link to="/blog/publishblog" class="title"
                        >PUBLISH BLOG</nuxt-link
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="head-user">
        <div class="icon-panel" @click="search.show = true">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#search"></use>
          </svg>
        </div>
        <div class="icon-panel" @click="clickUser">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#user"></use>
          </svg>
        </div>
        <nuxt-link class="icon-panel" to="/user/collection">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#love"></use>
          </svg>
          <div class="badge-frame" v-if="collectionList.length > 0">
            {{ collectionList.length }}
          </div>
        </nuxt-link>
        <nuxt-link class="icon-panel" to="/user/cart">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#cart"></use>
          </svg>
          <div class="badge-frame" v-if="cartList.length > 0">
            {{ cartList.length }}
          </div>
        </nuxt-link>
      </div>
    </div>
    <div class="model-frame" v-show="search.show" @click="search.show = false">
      <div class="container-fluid search-frame">
        <van-icon name="search" color="#979897" @click.stop="clickSearch" />
        <input
          @click.stop
          @keyup.enter="clickSearch"
          v-model="search.text"
          class="search-panel"
          placeholder="Search..."
          autofocus
        />
        <van-icon name="cross" color="#979897" @click="search.show = false" />
      </div>
    </div>
  </div>
</template>
<script>
import HeaderPC from "./HeaderPC";
import tool from "@/common/tool.js";
export default {
  mixins: [HeaderPC.mixin],
  data() {
    return {
      tool,
    };
  },
};
</script>
<style lang="less" scoped>
@import "./HeaderPC.less";
</style>